import React, { useEffect, useState } from 'react'
import { bem, genUUID } from '@/utils';
import { Image } from 'antd-mobile';
import { UpdateCartActionType, CartItemType } from '../typing';
import checkIcon from '@/assets/check.png';
import checkedIcon from '@/assets/checkbox_checked.png';
import Price from '@/components/price';
import Stepper from '@/components/stepper';

export interface CartItemProps {
    actId: string | number;
    shopId: string | number;
    cartItem: CartItemType,
    onHandlerSelect?: (value: UpdateCartActionType) => void;
    onHandlerQuantity?: (value: UpdateCartActionType) => void;
    onHandlerClick?: (value: {}) => void;
}

const CartItem: React.FC<CartItemProps> = (props) => {
    const {
        actId,
        shopId,
        cartItem,
        onHandlerSelect,
        onHandlerQuantity,
        onHandlerClick,
        ...rest
    } = {
        ...props
    };
    const b = bem('shoppingCart');

    const {
        cartId,
        checkType,
        goodsName,
        goodsImg,
        goodsPrice,
        quantity,
        skuLabels,
        mainSku,
        goodsId
    } = cartItem || {};

    const handlerSelect = () => {
        onHandlerSelect?.({ shopId, cartId, actId, checkType });
    }

    const changeQuantity = (num: number) => {
        onHandlerQuantity?.({ shopId, cartId, actId, quantity: num });
    }

    const handlerClick = () => {
        onHandlerClick?.({ shopId, cartId, actId, goodsId });
    }

    return (
        <div className={b('item')} key={cartId}>
            <div></div>
            <div className={b('goods')}>
                <div className={b('icon-select')} onClick={handlerSelect}>
                    <img className={b('icon-select__check')} src={checkType ? checkedIcon : checkIcon} />
                </div>

                <div className={b('goods__image')} onClick={handlerClick}>
                    <Image src={goodsImg} width={100} />
                </div>

                <div className={b('goods-content')}>
                    <div className={b('goods-name')} onClick={handlerClick}>{goodsName}</div>

                    <div className={b('goods-sku-change')}>
                        <div className={b('goods-sku-change__item')}>
                            <span className={b('goods-sku-change__item-name')}>{mainSku?.skuSpecsDesc}</span>
                        </div>
                    </div>

                    <div className={b('goods-discount-label-item')}>
                        {
                            skuLabels?.map((item, index) => {
                                return (
                                    <span key={index} className={b('goods-discount-label-item__name')}>
                                        {item.desc}
                                    </span>
                                )
                            })
                        }
                    </div>

                    <div className={b('goods-price-line')}>
                        <Price price={goodsPrice || 0} />
                        <div className={b('goods-price-line-num')}>
                            <Stepper defaultValue={quantity} onInputChange={changeQuantity} />
                        </div>
                    </div>
                    <div className={b('goods-action')}></div>
                </div>
            </div>
        </div>
    )
};

export default CartItem;

